<template>
  <view class="goods">
    <Mynavbar
      title="商品"
      leftcolor="#fff"
      :placeholder="true"
      color="#000"
      bgColor="#fff"
    />
    <view class="tabs">
      <u-subsection
        activeColor="#fff"
        inactiveColor="#666"
        :list="list"
        bgColor="#F5F6F7"
        :current="current"
        @change="changeEvent"
      ></u-subsection>
    </view>
    <view class="list">
      <view class="item" v-for="(v, i) in goodsList" :key="i">
        <view class="top" @click.stop="shareEvent(v)">
          <view class="left">
            <view class="pic">
              <image :src="v.image" mode="scaleToFill" />
            </view>
          </view>
          <view class="right">
            <view class="title">
              <image
                class="redPacket"
                v-if="v.is_activity"
                style="vertical-align:middle;"
                src="https://oss.xhoven.com/b2398f2597c2149c2c103fbf86e15960.png"
                mode="scaleToFill"
              />
              {{ v.name }}
            </view>
            <view class="price">
              <view class="now">￥{{ v.price }}</view>
              <view class="before">￥{{ v.market_price || 99999 }}</view>
            </view>
          </view>
        </view>
        <view class="bottom">
          <view class="btn" v-if="v.status == 2" @click="putawayEvent(v.id, 1)">
            <view class="label">上架</view>
            <image
              src="https://oss.xhoven.com/c524914b52bd2febad32afe7355deead.png"
              mode="scaleToFill"
            />
          </view>
          <view class="btn" v-else>
            <view class="label">上架</view>
            <image
              src="https://oss.xhoven.com/ec3b60e15def7d98113447890b5a86c9.png"
              mode="scaleToFill"
            />
          </view>

          <view class="btn" v-if="v.status == 1" @click="soldoutEvent(v.id, 2)">
            <view class="label">下架</view>
            <image
              src="https://oss.xhoven.com/85ffcd2b4b8f5782e6b655edf215af00.png"
              mode="scaleToFill"
            />
          </view>
          <view class="btn" v-else>
            <view class="label">下架</view>
            <image
              src="https://oss.xhoven.com/f1f4444682bd1a229da23137823d7f69.png"
              mode="scaleToFill"
            />
          </view>

          <view
            @click.stop="shareEvent(v)"
            ref="btn"
            :class="['btn']"
            hover-class="none"
            v-if="v.status !== 2"
          >
            <view class="label">分享</view>
            <image
              src="https://oss.xhoven.com/a6917d79c0d42f5aa99c606d3e622509.png"
              mode="scaleToFill"
            />
          </view>
          <view
            @click.stop="noneShare()"
            ref="btn"
            :class="['btn', 'none']"
            v-else
          >
            <view class="label">分享</view>
            <image
              src="https://oss.xhoven.com/632c2c08b984afb195d66bc72d43fd8d.png"
              mode="scaleToFill"
            />
          </view>
        </view>
      </view>
    </view>
    <u-loadmore :status="status" />
    <Tabs />
  </view>
</template>

<script>
import Tabs from '../../components/tabs.vue'
import Mynavbar from '../../components/Mynavbar.vue'
export default {
  components: { Tabs, Mynavbar },
  data () {
    return {
      list: ['默认排序', '已上架', '已下架'],
      current: 0,
      page: 1,
      goodsList: [],
      total: '',
      status: ''
    }
  },
  onLoad (options) {
    this.getGoodsList()
  },
  onReachBottom () {
    if (this.goodsList.length < this.total) {
      this.page++
      this.getGoodsList(true)
    }
  },
  // onShareAppMessage (obj) {
  //   return {
  //     title: '中家云c端',
  //     mpId: 'wx0bac8dd922c0260c',
  //     mpPath: 'subpages/Inthesale/details/index'
  //   }
  // },
  methods: {
    changeEvent (e) {
      this.current = e
      this.page = 1
      this.getGoodsList()
    },
    shareEvent (v) {
      uni.navigateToMiniProgram({
        // appId: 'wx0bac8dd922c0260c', // 中家云
        appId: 'wx727109cb85d280e9', // 塘厦
        envVersion: 'trial', //体验版 release
        path: `subpages/Inthesale/details/index?id=${
          v.id
        }&mode=BDFX&admin_id=${uni.getStorageSync('admin_id')}`
      })
      console.log('share')
    },
    noneShare () {
      uni.$u.toast('下架商品无法分享!')
    },
    async putawayEvent (ids, status) {
      uni.showModal({
        title: '提示',
        content: '是否确认上架该商品',
        showCancel: true,
        success: async ({ confirm, cancel }) => {
          if (confirm) {
            try {
              const res = await this.$api.goods.goodsStatus({
                ids,
                status
              })
              uni.$u.toast('修改成功!')
              if (this.current == 0) {
                this.goodsList[
                  this.goodsList.findIndex(v => v.id == ids)
                ].status =
                  this.goodsList[this.goodsList.findIndex(v => v.id == ids)]
                    .status == 1
                    ? 2
                    : 1
              } else {
                this.goodsList.splice(
                  this.goodsList.findIndex(v => v.id == ids),
                  1
                )
              }
            } catch (error) {
              uni.$u.toast(error.msg)
            }
          }
        }
      })
    },
    async soldoutEvent (ids, status) {
      uni.showModal({
        title: '提示',
        content: '是否确认下架该商品',
        showCancel: true,
        success: async ({ confirm, cancel }) => {
          if (confirm) {
            try {
              const res = await this.$api.goods.goodsStatus({
                ids,
                status
              })
              uni.$u.toast('修改成功!')
              if (this.current == 0) {
                this.goodsList[
                  this.goodsList.findIndex(v => v.id == ids)
                ].status =
                  this.goodsList[this.goodsList.findIndex(v => v.id == ids)]
                    .status == 1
                    ? 2
                    : 1
              } else {
                this.goodsList.splice(
                  this.goodsList.findIndex(v => v.id == ids),
                  1
                )
              }
            } catch (error) {
              uni.$u.toast(error.msg)
            }
          }
        }
      })
    },
    async getGoodsList (bol = false) {
      this.status = 'loading'
      const res = await this.$api.goods.goodsList({
        page: this.page,
        status: this.current,
        limit: 10
      })
      this.goodsList = bol
        ? [...this.goodsList, ...res.data.data]
        : res.data.data
      this.total = res.data.total
      if (this.goodsList.length >= this.total) {
        this.status = 'nomore'
      } else {
        this.status = 'loading'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.goods {
  min-height: 100vh;
  background-color: #f7f7f7;
  .tabs {
    height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    padding: 0 30rpx;
    ::v-deep .u-subsection--button__bar {
      border-radius: 50rpx !important;
      background-color: #3e73fe;
    }
    ::v-deep .u-subsection {
      border-radius: 50rpx;
    }
    ::v-deep .u-subsection--button {
      height: 80rpx;
    }
  }
  .list {
    padding: 20rpx 30rpx;
    padding-bottom: 0;
    .item {
      height: 290rpx;
      width: 100%;
      padding: 30rpx;
      background-color: #fff;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      &:last-child {
        margin-bottom: 0;
      }
      .top {
        display: flex;
        margin-bottom: 30rpx;
        .left {
          width: 140rpx;
          height: 140rpx;
          margin-right: 20rpx;
          border-radius: 10rpx;
          overflow: hidden;
          .pic {
            width: 100%;
            height: 100%;
            background-color: blueviolet;
          }
        }
        .right {
          min-width: 470rpx;
          max-width: 470rpx;
          display: flex;
          justify-content: center;
          flex-direction: column;
          .title {
            margin-bottom: 10rpx;
            .redPacket {
              width: 26rpx !important;
              height: 26rpx !important;
              margin-right: 5rpx;
            }
            font-size: 27rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .price {
            display: flex;
            align-items: flex-end;
            .now {
              font-size: 24rpx;
              color: #ff5757;
              margin-right: 10rpx;
              font-weight: 600;
            }
            .before {
              font-size: 20rpx;
              color: #999999;
              text-decoration: line-through;
            }
          }
        }
      }
      .bottom {
        border-top: 1px solid #f2f2f2;
        display: flex;
        padding-top: 30rpx;
        .btn {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: flex-end;
          .label {
            font-size: 20rpx;
            margin-right: 10rpx;
          }
          image {
            width: 28rpx !important;
            height: 28rpx !important;
          }
        }
      }
    }
  }
}

button {
  padding: 0;
  border: 0;
  background-color: #fff;
  &::after {
    border: 0;
  }
}

input[type='button'],
input[type='submit'],
input[type='reset'] {
  -webkit-appearance: none;
}
textarea {
  -webkit-appearance: none;
}
</style>
